@import "common.less";

/*全局变量*/
*{margin:0;padding:0}
ul,li{list-style-type:none;}
img {border:0;-ms-interpolation-mode: bicubic;max-width: 100%;}
input,textarea,button{outline: none;}
a,button{
  -webkit-tap-highlight-color: rgba(0,0,0,0.3);
}
html,body{height:100%;}
body{
  font: normal 100% PingFangSC-Light, Helvetica, "microsoft yahei", sans-serif;color:#000;position: relative;
  a{color:#333;text-decoration:none;cursor: pointer;}
}

//公用样式
.body{min-height: 100%;}
.disNone{display: none;}
.c-btn{height: 70/@rem;line-height: 70/@rem;text-align: center;color: #ffeaf1;font-size: 32/@rem;background: url("../img/btn-bg.jpg") repeat-x;border-radius: 30px;background-size:1px 100%;box-shadow: 0 2px 5px #0c0a18;display: block;text-shadow: 0 3px 2px #d82652;}
.c-btn-kong{height: 90/@rem;line-height: 90/@rem;text-align: center;color: #8b9ae6;font-size: 32/@rem;border-radius: 30px;border: 1px solid #8b9ae6;display: block;}
.gt_holder{z-index: 99;}
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

//底部导航栏
.nav{
  position: fixed;bottom: 0;width: 100%;max-width: @sreen;height: 120/@rem;background: url("../img/nav-bg.jpg") no-repeat;background-size: cover;overflow: hidden;z-index: 12;
  .li{float: left;width: 25%;height: 100%;
    &.active{background: url("../img/nav-bg-active.jpg") no-repeat;background-size: cover;}
    .img{width: 60/@rem;height: 60/@rem;margin: 15/@rem auto 5/@rem;
      &.small{width:50/@rem; height:60/@rem;
        img{margin-top:5/@rem;}
      }
    }
    p{text-align: center;color: #fff;font-size: 24/@rem;}
  }
}

//海报
.poster img{display: block;}

//成功预览
.sign-success{
  position: relative;padding-bottom: 220/@rem;  background: url("../img/bg-sign.jpg") #140f29 no-repeat; background-size: contain;
  //&:before {content: ''; position: fixed; z-index: -1; top: 0; right: 0; bottom: 0; left: 50%; max-width:@sreen; margin-left:-250px;}
  .head{text-align: center;margin: 0 58/@rem;border-bottom: 1px solid rgba(106,132,175,0.5);padding:60/@rem 0 24/@rem;
    .logo{display: inline-block;height: 100/@rem;vertical-align: -30/@rem;margin-right: 30/@rem;
      img{height: 100%;}
    }
    h2{display: inline-block;height: 72/@rem;font-size: 60/@rem;font-weight: normal;color: #fff;line-height: 72/@rem;padding-left: 30/@rem;border-left:1px solid rgba(106,132,175,0.5); }
  }
  .imgList{
    padding: 0 72/@rem 120/@rem;
    li{
      width: 530/@rem;margin: 50/@rem auto 0;
      &:first-child{border-bottom: 1px solid #657194;}
      &.heng{
        .img-box{
          width: 100%;
        }
        .info{padding: 20/@rem 24/@rem;}
      }
      .img-box{
        width: 380/@rem;margin: 0 auto;box-sizing: border-box;background-color: #fff;padding: 10/@rem;
        .img{position: relative;min-height: 200/@rem;background-color: #eee;
          img{display: block;width: 100%;height: auto;}
        }
        .number{
          position: absolute;width: 108/@rem;height: 108/@rem;right: -50/@rem;bottom: -38/@rem;background: url("../img/number-bg.png") no-repeat;background-size: cover;text-align: center;
          .one{color: #ff9eb6;font-size: 20/@rem;margin-top: 6/@rem;}
          .two{color: #fff;font-size: 30/@rem;font-weight: bold;line-height: 40/@rem;}
          .thr{color: #fff;font-size: 20/@rem;}
        }
      }
      .name{color: #5b5c6a;font-size: 44/@rem;font-weight: bold;padding-left: 15/@rem;margin-top: 20/@rem;position: relative;
        .votebox{position: absolute;top: 10/@rem;right: 15/@rem;height: 38/@rem;line-height: 38/@rem;font-size: 26/@rem;color: #eb5674;border: 1px solid #eb5674;border-radius: 30px;padding: 0 24/@rem 0 64/@rem;background: url("/src/img/icon-zan.png") 28/@rem center no-repeat;background-size: 23/@rem;
          i{position: absolute;color: #eb5674;font-size: 20/@rem;left: 20/@rem;top: -40/@rem;font-style: normal;display: none;}
        }
      }
      .text{color: #5b5c6a;font-size: 24/@rem;padding-left: 15/@rem;margin-bottom: 10/@rem;}
      .info{padding: 20/@rem 100/@rem;line-height: 44/@rem;font-size: 25/@rem;color: #5574ba;}
    }
  }
  .c-btn{margin: 0 96/@rem;height: 90/@rem;line-height: 90/@rem;}
  .c-btn-kong{margin: 30/@rem 96/@rem 0;box-sizing: border-box;}
  .message{font-size: 24/@rem;text-align: center;margin-top: 30/@rem;color:#8b9ae6;}
  .attentImg{
    position: fixed;right: 54/@rem;height: 150/@rem;bottom: 160/@rem;animation: topBottom 2s infinite;
    img{height: 100%;width: auto;}
  }
}

//分享弹出框
.share-box{
  position: fixed;top: 0;left: 0;bottom: 0;width: 100%;max-width: @sreen;background-color: rgba(0,0,0,0.8);z-index: 10;
  img{float: right;width: 190/@rem;margin-top: 30/@rem;margin-right: 90/@rem;}
}
//提示弹出框（自动关闭）
.prompt{
  position: fixed;width: 366/@rem;height: 220/@rem;top: 50%;left: 50%;margin-top: -110/@rem;margin-left: -183/@rem;border-radius: 10px;background-color: rgba(0,0,0,0.8);z-index: 10;
  display: table;
  p{display: table-cell;vertical-align: middle;color: #fff;text-align: center;line-height: 50/@rem;font-size: 30/@rem;padding: 30/@rem;}
}
//提示弹出框（手动关闭）
.alert-box{
  position: fixed;top: 0;bottom: 0;left: 0;right: 0;background-color: rgba(0,0,0,0.75);z-index: 10;
  .alert{
    position: absolute;text-align: center;width: 500/@rem;height: 670/@rem;left: 50%;margin-left: -250/@rem;top: 50%;margin-top: -335/@rem;background: url("../img/home-alert-bg.png") no-repeat;background-size: 100%;
    .close{position: absolute;width: 50/@rem;height: 50/@rem;right: 15/@rem;top: -70/@rem;background: url("../img/close-btn.png") no-repeat;background-size: 100% 100%;}
    img{margin:50/@rem 0 10/@rem; max-width: 80%}
    h2{color: @color-blue;font-size: 30/@rem;line-height: 60/@rem;font-weight: normal; padding: 0 20/@rem;}
  }
}

@media (min-width: @sreen) {
  body{width: @sreen;margin: 0 auto;}
}

@keyframes topBottom {
  0%,100%{
    transform: translate3d(0,-15px,0);
  }
  50%{
    transform: translate3d(0,15px,0);
  }
}